# Loader API

Loader API가 기본으로 빌트인돼요. 아래와 같이 사용해요.

```tsx showLineNumbers filename="HomeActivity.loader.ts" copy
import { ActivityLoaderArgs, useLoaderData } from "@stackflow/react/future";

export function homeActivityLoader({ params }: ActivityLoaderArgs<"HomeActivity">) {
  return {
    // ...
  }
}
```

자동으로 타입이 채워져요.
```tsx showLineNumbers filename="HomeActivity.tsx" copy {4}
import { homeActivityLoader } from "./HomeActivity.loader";

export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
  const loaderData = useLoaderData<typeof homeActivityLoader>();
}
```

`stackflow.config.ts` 파일에 생성한 로더를 삽입해요
```tsx showLineNumbers filename="stackflow.config.ts" copy {9}
import { defineConfig } from "@stackflow/config";
import { homeActivityLoader } from "../components/HomeActivity.loader";

export const config = defineConfig({
  activities: [
    {
      name: "HomeActivity",
      route: "/",
      loader: homeActivityLoader,
    },
    {
      name: "MyProfileActivity",
      route: "/my-profile",
    }
  ],
  transitionDuration: 270,
});
```
